<template>
    <div class="tourist shadow-sm">
      <breadcrumb class="bread-crumb" :navigation="navigation" />
      <ul class="tourist-ul">
        <li class="tourist-li info-li">
          <h3>个人简介</h3>
          <p class="info-p" v-html="tourist.introduction.content"></p>
          <span class="delimiter" v-if="editor"></span>
        </li>
        <li class="tourist-li">
          <editor v-if="editor" :reply="showCancelReply" @submit="handleSubmit" />
        </li>
        <li v-if="comments.length > 0" class="tourist-li">
          <h3>最新留言</h3>
          <comment :comments="comments"
            @showEditor="showEditor"
            @seeMore="handleSeeMore"
            @cancel="cancel"
            @submit="handleSubmit">
          </comment>
          <b-row class="w-100">
            <b-col cols="12" class="d-none d-sm-block">
              <pagination :query="query" @page="handlePage" />
            </b-col>
            <b-col cols="12" class="d-sm-none d-block">
              <mobile-pagination :query="query" @page="handlePage" />
            </b-col>
          </b-row>
        </li>
      </ul>
    </div>
</template>

<script>
import Breadcrumb from '../../components/Breadcrumb'
import Pagination from '../../components/Pagination'
import MobilePagination from '../../components/MobilePagination'
import Editor from '../../components/Editor'
import Comment from '../../components/Comment'
import { list, add, getSubCommentList } from '@/api/comment'
import { personalProfile } from '@/api/userInfo'

export default {
  name: 'Tourist',
  data () {
    return {
      navigation: '> 留言',
      editor: true,
      showCancelReply: false,
      userId: '214568756412',
      query: {
        type: 0,
        parentId: 0,
        current: 1,
        size: 10
      },
      tourist: {
        introduction: {
          title: '个人简介',
          content: '不喜欢太正式，所以随意来点介绍 <br><br>\n' +
          '            英文名：Ruison<br><br>\n' +
          '            性别：男<br><br>\n' +
          '            年龄：22岁 <br><br>\n' +
          '            所在地：广东广州 <br><br>\n' +
          '            感情状况：家有母老虎一只 <br><br>\n' +
          '            工作情况：还只是一只刚出生的程序猿<br><br>\n' +
          '            爱好：这个很广泛，随意起来都看不出是程序猿 <br><br>\n' +
          '            联系邮箱：yuanjjrr@foxmail.com  联系QQ：1191283678'
        }
      },
      comments: [],
      temp: {}
    }
  },
  mounted () {
    this.getCommentList()
    this.getPersonalProfile()
  },
  methods: {
    // 获取评论列表
    getCommentList () {
      this.comments = []
      this.query.total = undefined
      this.query.pages = undefined
      list(this.query).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 评论数据
          this.comments = data.records
          // 总数据量
          this.query.total = data.total
          // 总页数
          this.query.pages = data.pages
          // 获取上级昵称
          this.sortComments(this.comments)
        }
      })
    },
    // 获取个人简介
    getPersonalProfile () {
      personalProfile(this.userId).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          this.tourist.introduction.content = data
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    // 评论
    addComment () {
      this.temp.type = 0
      add(this.temp).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          const data = response.data.data
          if (data.parentId === 0 || data.parentId === undefined) {
            if (this.comments.length > 0) {
              this.comments.unshift(data)
            } else {
              this.getCommentList()
            }
          } else {
            this.comments.some((item, index, array) => {
              if (item.id === this.temp.topLevelId) {
                this.comments[this.comments.indexOf(item)].children.records.push(data)
                return true
              }
            })
          }
          // 获取上级昵称
          this.sortComments(this.comments)
          this.$notify({
            title: '来自远程服务器的提示',
            message: '留言成功',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    showEditor (editor, showCancelReply) {
      this.editor = editor
      this.showCancelReply = showCancelReply
    },
    cancel (editor, showCancelReply) {
      this.editor = editor
      this.showCancelReply = showCancelReply
    },
    handlePage (query) {
      this.query = query
    },
    handleSubmit (temp) {
      this.temp = temp
      this.addComment()
    },
    // 查看评论更多
    handleSeeMore (id, current) {
      getSubCommentList({ type: 0, current, size: 5, topLevelId: id }).then(response => {
        if (response.data.code === 200 && response.data.data.records.length > 0) {
          this.comments.forEach(c => {
            if (c.id === id) {
              response.data.data.records.forEach(item => {
                c.children.records.push(item)
              })
            }
          })
        }
      })
    },
    // 排序评论回复人
    sortComments (comments) {
      if (comments) {
        this.comments.some((item, itemIndex, itemArray) => {
          if (item.children.records.length > 0) {
            return item.children.records.some((i, iIndex, iArray) => {
              if (i.parentId === item.id) {
                i.upperLevelNickName = item.nickName
                return itemIndex + 1 >= itemArray.length
              } else {
                item.children.records.some((j, jIndex, jArray) => {
                  if (i.parentId === j.id) {
                    i.upperLevelNickName = j.nickName
                    return iIndex + 1 >= iArray.length
                  }
                })
              }
            })
          }
        })
      }
    }
  },
  computed: {
    newCurrent () {
      return this.query.current
    }
  },
  watch: {
    // 当前页发生变化时，请求数据
    newCurrent (newValue, oldValue) {
      this.getCommentList()
    }
  },
  components: {
    Breadcrumb,
    Pagination,
    MobilePagination,
    Editor,
    Comment
  }
}
</script>

<style scoped lang="stylus">
  img
    width 36px
    height 36px

  .reply-editor
    margin: 10px 0 20px
    padding 10px
    border 1px solid #ddd

  .tourist
    display flex
    opacity: 0.9
    flex-flow column
    background #fff
    height fit-content
    padding 20px 20px 0px 20px
    .tourist-ul
      .tourist-li
        display flex
        flex-flow column
        h3
          font-size: 14px;
          padding: 10px 0px;
          line-height: 14px;
          color: #999;
          font-weight: normal;
          border-bottom: dotted 1px #e6e6e6;
        .info-p
          display inline-block
          margin-bottom 20px
          padding 12px 0 0 0px
        .delimiter
          overflow hidden
          margin 10px 0
          background-color #f7f7f7
          border-bottom 1px solid #eee
        .comment
          .comment-area
            display: block;
            width: 100%;
            height: 110px;
            min-height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #fff;
            border: 1px solid #D9D9D9;
            border-top-color: #C0C0C0;
            border-left-color: #d0d0d0;
            -webkit-transition: border linear .2s;
            -moz-transition: border linear .2s;
            transition: border linear .2s;
            margin-bottom: 5px;
          .button-submit
            height: 40px;
            line-height: 20px;
            width: 100%;
            display: inline-block;
            padding: 6px 12px 4px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            color: #777;
            font-size: 15px!important;
            border: 1px solid #eee;
            background: #f8f8f8;
          .button-submit:hover
            color #444
            background: #f8f8f8;
            border: 1px solid #DBDBDB;
          h4
            float: left;
            width: 180px;
            font-size: 12px;
            line-height: 100px;
            margin-right: 40px;
            text-align: right;
            font-weight bold
          .contact-ul
            border-left: dotted 1px #ccc;
            padding-left: 30px;
            li
              margin-bottom: 10px;
              .ipt
                height 20px
                margin-right: 10px;
                border: 1px solid #D9D9D9;
                line-height: 20px;
                color: #555555;
                font-size 12px
              .ipt::selection
                border: 1px solid #999;
              .ipt::-moz-selection
                border: 1px solid #999;
        .contact
          display flex
          flex-flow row
          padding: 20px 0 0 0px;
      .info-li
        padding-top 20px
</style>
